<template>
	<m-layout2 title="我的用户信息" gap="24" class="bank-card">
		<m-block gap="30 30 0" :isBg="true">
			<view class="ul">
				<view class="li">
					<text>姓名</text>
					<input v-model="form.username" type="text" placeholder="请输入姓名">
				</view>
				<view class="li">
					<text>年龄</text>
					<input v-model="form.age" type="text" placeholder="请输入年龄">
				</view>
				<view class="li">
					<text>手机号码</text>
					<input v-model="form.phone" type="text" placeholder="请输入电话号码">
				</view>
				<view class="li">
					<text>身份证号码</text>
					<input v-model="form.idcard" type="text" placeholder="请输入身份证号码">
				</view>
				<view class="li">
					<text>所属区县/公司</text>
					<input v-model="form.invcompy" type="text" placeholder="请输入所属区县/公司">
				</view>

			</view>
		</m-block>
		<view class="btn-box" slot="footer">
			<m-button @click="verify" v-if="userinfo.truename">提交</m-button>
			<m-button @click="Jump('/pages/mine/information/information')" v-else>未实名，前往认证</m-button>
		</view>
		<m-dialog :isShow="isShow" title="提示" :showCancel="true" @handleConfirm="addPayCardFn"
			@handleCancel="isShow = false">
			<view class="hint" style="text-align: center;">
				请反复确认提交的信息
			</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
	import { email, mobile, idCard, digits } from '@/libs/fn/verify.js' // 引入验证工具库
	import { tokenAddEdit, mytoken } from "@/api/Users.js"
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isShow: false,
				form: {
					userid: 0,
					username: '', // 姓名
					age: '', // 年龄
					phone: '', // 手机号码
					idcard: '', // 身份证号码
					invcompy: '', // 所属区县/公司
					tag: '',
					statestr: ''
				},
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			}),
		},
		onLoad() {
			this.getTokenInfoFn()
		},
		methods: {
			// 添加用户信息
			async addPayCardFn() {
				await this.verify();
				this.form.age = Number(this.form.age);
				if (!this.form.tag) this.form.tag = 'add';
				if (!this.form.statestr) this.form.statestr = 'add';
				const { success, msg } = await tokenAddEdit(this.form);
				this.Toast(msg)
				if (success) {
					await this.getTokenInfoFn()
					this.isShow = false;
				}
			},
			// 获取用户确认信息
			async getTokenInfoFn() {
				const { data, success, msg } = await mytoken()
				if (data.age == 0) data.age = '';
				this.form = { ...data }
			},
			verify() {
				if (!this.form.username) return this.Toast('请输入姓名')
				if (!this.form.age || !digits(this.form.age)) return this.Toast('请输入正确的年龄')
				if (!this.form.phone || !mobile(this.form.phone)) return this.Toast('请输入正确的手机号');
				if (!this.form.idcard || !idCard(this.form.idcard)) return this.Toast('请输入正确的身份证号码')
				if (!this.form.invcompy) return this.Toast('请输入所属区县/公司')
				this.isShow = true;
			},
		},

	}
</script>

<style lang="scss">
	.bank-card {
		.head {
			padding-top: 20rpx;
			background: #fff;
			text-align: center;

		}

		.ul {
			background: #fff;
			padding: 0rpx 0 0;

			.li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0rpx;

				text {
					display: block;
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.box {
					flex: 1;

					.error {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #908080;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}

			.li+.li {
				border-top: 1rpx solid #EEEEEE;
			}
		}


	}

	.btn-box {
		padding: 30rpx 24rpx;
		box-sizing: border-box;

	}

	.picker-box {
		padding: 60rpx 0;
		background: #fff;
	}

	.code-box {
		text-align: center;
		line-height: 64rpx;
		width: 180rpx;
		height: 72rpx;
		cursor: pointer;
	}
</style>